import React, { Suspense, lazy } from "react";
import { Navigate, Outlet } from "react-router-dom";
import MainLayout from "../layouts/MainLayout";
import Loading from "../components/Loading";
import NotFound from "../pages/NotFound";
import ProtectedRoute from "../components/ProtectedRoute";
//--------------------------
// 1. 工具函数：仅保留懒加载和Suspense包装
//--------------------------
// 懒加载组件
const lazyLoad = (componentPath) => {
  return lazy(() => import(`../pages/${componentPath}`));
};

// 统一包装带Suspense的路由元素
const withSuspense = (Component) => (
  <Suspense fallback={<Loading />}>
    <Component />
  </Suspense>
);

//--------------------------
// 2. 懒加载组件（集中管理）
//--------------------------
const components = {
  Home: lazyLoad("Home"),
  About: lazyLoad("About"),
  ProductDetail: lazyLoad("ProductDetail"),
  Login: lazyLoad("Login"),
  VoiceBroadcast: lazyLoad("VoiceBroadcast"),
  RiskControl: lazyLoad("RiskControl"),

  // 表单管理
  Form1: lazyLoad("FormMgmt/Form1"),
  Form2: lazyLoad("FormMgmt/Form2"),
  Form3: lazyLoad("FormMgmt/Form3"),
  Form4: lazyLoad("FormMgmt/Form4"),

  // 表格管理
  Table1: lazyLoad("TableMgmt/Table1"),
  Table2: lazyLoad("TableMgmt/Table2"),
  Table3: lazyLoad("TableMgmt/Table3"),
  Table4: lazyLoad("TableMgmt/Table4"),

  // 系统管理
  User: lazyLoad("SystemMgmt/User"),
  Role: lazyLoad("SystemMgmt/Role"),
  OperationRecord: lazyLoad("SystemMgmt/OperationRecord"),
  Menu: lazyLoad("SystemMgmt/Menu"),
  LoginRecord: lazyLoad("SystemMgmt/LoginRecord"),
  File: lazyLoad("SystemMgmt/File"),
  Dictionary: lazyLoad("SystemMgmt/Dictionary"),
  Company: lazyLoad("SystemMgmt/Company"),

  // 扩展功能
  Cropper: lazyLoad("ExtensionMgmt/Cropper"),
  Css3: lazyLoad("ExtensionMgmt/Css3"),
  Editor: lazyLoad("ExtensionMgmt/Editor"),
  Map: lazyLoad("ExtensionMgmt/Map"),
  Pdf: lazyLoad("ExtensionMgmt/Pdf"),
  Qrcode: lazyLoad("ExtensionMgmt/Qrcode"),
  Regions: lazyLoad("ExtensionMgmt/Regions"),
  Watermark: lazyLoad("ExtensionMgmt/Watermark"),
};

//--------------------------
// 3. 权限控制组件
//--------------------------
// const PrivateRoute = ({ children }) => {
//   const matches = useMatches();
//   useEffect(() => {
//     const currentRoute = matches[matches.length - 1];
//     const pageTitle = "月库-" + currentRoute?.handle?.title || "我的网站";
//     document.title = pageTitle;
//   }, [matches]);
//   const isLogin = localStorage.getItem("isLogin");
//   const from = window.location.pathname; // 记录来源路径
//   return !isLogin ? (
//     <Navigate to="/login" replace state={{ from }} />
//   ) : (
//     children
//   );
// };

//--------------------------
// 4. 子路由配置（直接手动定义路径）
//--------------------------
// 表单管理子路由
const formMgmtChildren = [
  {
    path: "form1", // 相对路径（父路由为/formMgmt，完整路径自动为/formMgmt/form1）
    element: withSuspense(components.Form1),
    meta: { hideInMenu: false, title: "简单表单" },
    handle: { title: "简单表单", path: "/formMgmt/form1" }, // 手动指定完整路径
  },
  {
    path: "form2",
    element: withSuspense(components.Form2),
    meta: { hideInMenu: false, title: "简单表单 2" },
    handle: { title: "简单表单 2", path: "/formMgmt/form2" },
  },
  {
    path: "form3",
    element: withSuspense(components.Form3),
    meta: { hideInMenu: false, title: "简单表单 3" },
    handle: { title: "简单表单 3", path: "/formMgmt/form3" },
  },
  {
    path: "form4",
    element: withSuspense(components.Form4),
    meta: { hideInMenu: false, title: "简单表单 4" },
    handle: { title: "简单表单 4", path: "/formMgmt/form4" },
  },
];

// 表格管理子路由
const tableMgmtChildren = [
  {
    path: "table1",
    element: withSuspense(components.Table1),
    meta: { hideInMenu: false, title: "简单表格" },
    handle: { title: "简单表格", path: "/tableMgmt/table1" },
  },
  {
    path: "table2",
    element: withSuspense(components.Table2),
    meta: { hideInMenu: false, title: "简单表格 2" },
    handle: { title: "简单表格 2", path: "/tableMgmt/table2" },
  },
  {
    path: "table3",
    element: withSuspense(components.Table3),
    meta: { hideInMenu: false, title: "简单表格 3" },
    handle: { title: "简单表格 3", path: "/tableMgmt/table3" },
  },
  {
    path: "table4",
    element: withSuspense(components.Table4),
    meta: { hideInMenu: false, title: "简单表格 4" },
    handle: { title: "简单表格 4", path: "/tableMgmt/table4" },
  },
];

// 系统管理子路由
const systemMgmtChildren = [
  {
    path: "user",
    element: withSuspense(components.User),
    meta: { hideInMenu: false, title: "用户管理" },
    handle: { title: "用户管理", path: "/systemMgmt/user" },
  },
  {
    path: "role",
    element: withSuspense(components.Role),
    meta: { hideInMenu: false, title: "角色管理" },
    handle: { title: "角色管理", path: "/systemMgmt/role" },
  },
  {
    path: "company",
    element: withSuspense(components.Company),
    meta: { hideInMenu: false, title: "公司管理" },
    handle: { title: "公司管理", path: "/systemMgmt/company" },
  },
  {
    path: "menu",
    element: withSuspense(components.Menu),
    meta: { hideInMenu: false, title: "菜单管理" },
    handle: { title: "菜单管理", path: "/systemMgmt/menu" },
  },
  {
    path: "file",
    element: withSuspense(components.File),
    meta: { hideInMenu: false, title: "文件管理" },
    handle: { title: "文件管理", path: "/systemMgmt/file" },
  },
  {
    path: "dictionary",
    element: withSuspense(components.Dictionary),
    meta: { hideInMenu: false, title: "字典管理" },
    handle: { title: "字典管理", path: "/systemMgmt/dictionary" },
  },
  {
    path: "loginRecord",
    element: withSuspense(components.LoginRecord),
    meta: { hideInMenu: false, title: "登录管理" },
    handle: { title: "登录管理", path: "/systemMgmt/loginRecord" },
  },
  {
    path: "operationRecord",
    element: withSuspense(components.OperationRecord),
    meta: { hideInMenu: false, title: "操作管理" },
    handle: { title: "操作管理", path: "/systemMgmt/operationRecord" },
  },
];

// 扩展功能子路由
const extensionMgmtChildren = [
  {
    path: "cropper",
    element: withSuspense(components.Cropper),
    meta: { hideInMenu: false, title: "图片截取" },
    handle: { title: "图片截取", path: "/extensionMgmt/cropper" },
  },
  {
    path: "Css3",
    element: withSuspense(components.Css3),
    meta: { hideInMenu: false, title: "动画" },
    handle: { title: "动画", path: "/extensionMgmt/Css3" },
  },
  {
    path: "editor",
    element: withSuspense(components.Editor),
    meta: { hideInMenu: false, title: "富文本" },
    handle: { title: "富文本", path: "/extensionMgmt/editor" },
  },
  {
    path: "map",
    element: withSuspense(components.Map),
    meta: { hideInMenu: false, title: "地图" },
    handle: { title: "地图", path: "/extensionMgmt/map" },
  },
  {
    path: "Pdf",
    element: withSuspense(components.Pdf),
    meta: { hideInMenu: false, title: "pdf" },
    handle: { title: "pdf", path: "/extensionMgmt/Pdf" },
  },
  {
    path: "Qrcode",
    element: withSuspense(components.Qrcode),
    meta: { hideInMenu: false, title: "二维码" },
    handle: { title: "二维码", path: "/extensionMgmt/Qrcode" },
  },
  {
    path: "regions",
    element: withSuspense(components.Regions),
    meta: { hideInMenu: false, title: "地址" },
    handle: { title: "地址", path: "/extensionMgmt/regions" },
  },
  {
    path: "watermark",
    element: withSuspense(components.Watermark),
    meta: { hideInMenu: false, title: "水印" },
    handle: { title: "水印", path: "/extensionMgmt/watermark" },
  },
];

//--------------------------
// 5. 主路由配置（简化版）
//--------------------------
export const routesConfig = [
  // 登录页
  {
    path: "/login",
    element: withSuspense(components.Login),
    meta: { hideInMenu: true, title: "登录" },
    handle: { title: "登录", path: "/login" }, // 手动定义handle
  },

  // 私有路由（需登录）
  {
    element: (
      // <PrivateRoute>
      //   <MainLayout />
      // </PrivateRoute>
      <ProtectedRoute>
        <MainLayout />
      </ProtectedRoute>
    ),
    children: [
      // 首页
      {
        path: "/",
        element: withSuspense(components.Home),
        meta: { hideInMenu: false, title: "首页", icon: "HomeOutlined" },
        handle: { title: "首页", path: "/" },
      },

      // 业务模块
      {
        path: "/voiceBroadcast",
        element: withSuspense(components.VoiceBroadcast),
        meta: { hideInMenu: false, title: "播报", icon: "SoundOutlined" },
        handle: { title: "播报", path: "/voiceBroadcast" },
      },
      {
        path: "/riskControl",
        element: withSuspense(components.RiskControl),
        meta: {
          hideInMenu: false,
          title: "风险管理",
          icon: "FundProjectionScreenOutlined",
        },
        handle: { title: "风险管理", path: "/riskControl" },
      },

      // 表单管理（带子路由）
      {
        path: "/formMgmt",
        element: <Outlet />,
        meta: {
          hideInMenu: false,
          title: "表单管理",
          icon: "ContainerOutlined",
        },
        handle: {
          title: "表单管理",
          path: "/formMgmt",
          firstChildPath: "/formMgmt/form1", // 手动指定第一个子路由路径
        },
        children: [
          // 索引路由：访问/formMgmt时自动跳转到第一个子路由
          { index: true, element: <Navigate to="form1" replace /> },
          ...formMgmtChildren,
        ],
      },

      // 表格模块
      {
        path: "/tableMgmt",
        element: <Outlet />,
        meta: { hideInMenu: false, title: "表格管理", icon: "TableOutlined" },
        handle: {
          title: "表格管理",
          path: "/tableMgmt",
          firstChildPath: "/tableMgmt/table1",
        },
        children: [
          { index: true, element: <Navigate to="table1" replace /> },
          ...tableMgmtChildren,
        ],
      },
      // 系统管理模块
      {
        path: "/systemMgmt",
        element: <Outlet />,
        meta: { hideInMenu: false, title: "系统管理", icon: "SettingOutlined" },
        handle: {
          title: "系统管理",
          path: "/systemMgmt",
          firstChildPath: "/systemMgmt/user",
        },
        children: [
          { index: true, element: <Navigate to="user" replace /> },
          ...systemMgmtChildren,
        ],
      },

      // 扩展模块
      {
        path: "/extensionMgmt",
        element: <Outlet />,
        meta: { hideInMenu: false, title: "功能扩展", icon: "UngroupOutlined" },
        handle: {
          title: "功能扩展",
          path: "/extensionMgmt",
          firstChildPath: "/extensionMgmt/cropper",
        },
        children: [
          { index: true, element: <Navigate to="cropper" replace /> },
          ...extensionMgmtChildren,
        ],
      },

      // 其他页面
      {
        path: "/about",
        element: withSuspense(components.About),
        meta: { hideInMenu: false, title: "关于我们", icon: "UserOutlined" },
        handle: { title: "关于我们", path: "/about" },
      },
      {
        path: "/productDetail/:id",
        element: withSuspense(components.ProductDetail),
        meta: { hideInMenu: false, title: "产品", icon: "VideoCameraOutlined" },
        handle: { title: "产品", path: "/productDetail/:id" },
      },
    ],
  },

  // 404 页面
  {
    path: "*",
    element: <NotFound />,
    meta: { hideInMenu: true, title: "404" },
    handle: { title: "404", path: "*" },
  },
];
